<template>
  <div class="cart">

    <!-- 空白购物车 -->
    <!-- <van-empty v-show="" image="http://yanxuan.nosdn.127.net/3a6c77d8463d8675f4a0a0c80dbe4391.png" image-size="250" description="去添加点什么吧" /> -->
    <!-- 商品列表 -->
    <!-- 购物车添加每家商品的数据 -->
    <div class="item" v-for="(item,index) in cartList1" :key="item.id">
      <!-- 单价包邮 -->
      <div class="title">
        <span class="left">单间包邮</span>
        <span class="right"> 以下商品免邮</span>
      </div>
      <div class="bottom">
        <!-- 滑动模块（商品） -->
        <!--复选框-->
        <van-checkbox :checked="!!item.isChecked" @click="changeIsChecked(item)"></van-checkbox>
        <van-swipe-cell>
          <van-card :price="item.cartPrice" :desc="item.skuName" :title="item.skuName" class="goods-card" :thumb="item.imgUrl">
            <!-- 点击增加或者减少的按钮 -->
            <template #footer rows>
              <van-stepper v-model="item.skuNum" theme="round" button-size="22" disable-input @plus=addNum(item,1) @minus=minusNum(item,-1) @change=changeNum />
            </template>
          </van-card>
          <!-- 划出的删除按钮 -->
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteCart(item.skuId)" />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <!-- 底部结算总计提交栏 -->

    <van-sticky :offset-bottom="120" position="bottom">
      <van-submit-bar safe-area-inset-bottom:false :price="price" button-text="结算" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" :disabled="cartList1?.length>0?false:true">全选</van-checkbox>

      </van-submit-bar>

    </van-sticky>

  </div>
  <TabbarServe></TabbarServe>
</template>

<script lang="ts"  >
export default {
  name: 'Cart'

};
</script>

<script lang='ts' setup>
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import { computed, onMounted, ref } from 'vue';
import { userShopCartData } from '../../store/shopcart/index';
import { getCartIsChecked, reqDeleteCart, reqAddToCart } from '../../api/cart';
import { nextTick } from 'vue';
import { storeToRefs } from 'pinia';
const shopCart = userShopCartData();

const router = useRouter();
const { cartList1 } = storeToRefs(shopCart); //这个是获取的getters的属性，直接就是响应式数据
// console.log(cartList1, 77777);

// const cartList = ref();
cartList1.value = shopCart.cartList; //拿到仓库里存的数据----遍历使用的
// console.log('cartList', cartList);
// const checkedAll = ref(false);
const priceAll = ref(3333); //计步器的钱数

// 异步执行完拿到购物车数据列表
nextTick(async () => {
  await shopCart.shopCartData();
  cartList1.value = shopCart.cartList;
});
//点击提交事件
const onSubmit = () => {
  router.push({ path: 'trade' });
};

// 点击全选和全不选
const checkedAll = computed({
  get() {
    // console.log(cartList1);
    return cartList1.value?.every((item: any) => item.isChecked === 1);
  },
  async set(val) {
    const skuIdList: any = [];
    cartList1.value?.forEach((item: any) => {
      // val ? (item.isChecked = 1) : (item.isChecked = 0);
      item.isChecked = val ? 1 : 0;
      skuIdList.push(item.skuId);
    });
    const result = await getCartIsChecked(skuIdList, val ? 1 : 0);
  }
});

//点击删除商品
const deleteCart = async (skuId: any) => {
  // console.log(skuId, 2222);

  await reqDeleteCart(skuId);

  shopCart.shopCartData(); //再次刷新获取
};

// 点击计步器添加的按钮
const addNum = async (item: any, num: any) => {
  await reqAddToCart(item.skuId, num);
};

// 点击计步器减少按钮
const minusNum = async (item: any, num: any) => {
  await reqAddToCart(item.skuId, num);
};

//
// 计算商品价钱
// let price = computed(() => {
//   return shopCart.cartList
//     ?.filter((item: any) => item.isChecked)
//     .reduce((prev: any, item: any) => {
//       return item.skuPrice * 100 * item.skuNum + prev;
//     }, 0);
// });

let price = computed(() => {
  return cartList1.value?.reduce((prev: any, item: any) => item.skuPrice * 100 * item.skuNum * item.isChecked + prev, 0);
});
const isChecked = ref();
const changeIsChecked = async (item: any) => {
  // console.log('测试', item.isChecked);

  if (item.isChecked === 0) {
    isChecked.value = 1;
  } else {
    isChecked.value = 0;
  }
  // console.log('测试2', item.isChecked);
  // // 2、更改商品选中状态
  const result: any = await getCartIsChecked(item.skuId, isChecked.value);
  // console.log('测试3', item.isChecked);

  // console.log(222);

  shopCart.shopCartData();
  // console.log(333);
  // item.isChecked = item.isChecked === 1 ? 0 : 1;
};

// 挂载完执行
onMounted(() => {
  // 1、获取购物车商品列表
  shopCart.shopCartData();
});
</script>

<style lang='less'  scoped>
.goodsList {
  background-color: #aaa;
}
.cart {
  &::after {
    content: '';
    display: block;
    height: 100px;
  }
  width: 100%;
  height: 100%;
  padding-top: 10px;
  background-color: #f4f4f4;
  margin-bottom: 50px;
  .item {
    background-color: #ffffff;
    padding-left: 10px;
    .van-swipe-cell__left {
      left: 2px;
      margin: 28px;
    }
    border-radius: 4%;
    .title {
      margin: 20px;

      .left {
        font-size: 16px;
        font-weight: bold;
      }
      .right {
        font-size: 9px;
        line-height: 26px;
      }
    }
    .bottom {
      padding: 0;
      margin: 0;
      display: flex;

      .goods-card {
        background-color: white;
        width: 350px;
      }
      .delete-button {
        height: 100%;
      }
    }
  }

  :deep(.van-submit-bar) {
    bottom: 50px;
  }
}
</style>


